'use client';

import { useState } from 'react';
import { Collapsible } from '@douyinfe/semi-ui';
import { Icon } from '@iconify/react';
import Image from 'next/image';
import clsx from 'clsx';
import { MarkdownRender } from '@/components/common/MarkdownRender';

interface Props {
  title: string;
  description: string;
  collapsed?: boolean;
  isStreaming: boolean;
}

export default function AiCard({
  title,
  description,
  collapsed,
  isStreaming,
}: Props) {
  const [isOpen, setOpen] = useState<boolean>(collapsed || false);

  const toggle = () => {
    setOpen(!isOpen);
  };

  return (
    <div className="box-border overflow-x-auto rounded-semi-border-radius-medium border border-semi-color-primary-light-active p-4">
      <div
        className="relative flex cursor-pointer items-center rounded-semi-border-radius-small py-2 hover:bg-semi-color-default-hover"
        onClick={toggle}
      >
        <div className="relative h-8 w-16">
          <Image src="/paragraph.svg" alt="段落" fill={true}></Image>
        </div>
        <div className="rounded-semi-border-radius-small hover:cursor-pointer hover:bg-semi-color-default-hover">
          <Icon
            icon="ic:round-arrow-right"
            fontSize={28}
            className={clsx(
              'text-semi-color-text-1 transition-transform duration-300',
              {
                'rotate-90': isOpen,
              }
            )}
          ></Icon>
        </div>
        <span className="ml-2 text-semi-color-text-1">{title}</span>
        {isStreaming ? (
          <div className="absolute right-3 top-3 flex items-center gap-2">
            <div className="relative">
              <div className="h-4 w-4 animate-pulse rounded-full bg-gradient-to-r from-pink-500 to-violet-500"></div>
              <div className="absolute inset-0 h-4 w-4 animate-ping rounded-full bg-gradient-to-r from-pink-500 to-violet-500 opacity-75"></div>
            </div>
            <span className="bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-sm font-medium text-transparent">
              处理中
            </span>
          </div>
        ) : (
          <div className="absolute right-3 top-3 flex items-center gap-2">
            <div className="relative">
              <div className="flex h-4 w-4 items-center justify-center rounded-full bg-gradient-to-r from-emerald-500 to-teal-500">
                <svg
                  className="h-2.5 w-2.5 text-white"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                    clipRule="evenodd"
                  />
                </svg>
              </div>
              <div className="absolute inset-0 h-4 w-4 animate-pulse rounded-full bg-gradient-to-r from-emerald-500 to-teal-500 opacity-30"></div>
            </div>
            <span className="bg-gradient-to-r from-emerald-500 to-teal-500 bg-clip-text text-sm font-medium text-transparent">
              完成
            </span>
          </div>
        )}
      </div>
      <Collapsible isOpen={isOpen}>
        <ul className="ml-16">
          <li>
            <div className="mt-2 text-semi-color-text-2">
              <MarkdownRender content={description}></MarkdownRender>
            </div>
          </li>
        </ul>
      </Collapsible>
    </div>
  );
}
